<template>
  <el-main class="image-main" v-loading="loading">
    <div class="top p-3">
      <el-row :gutter="10">
        <el-col :span="6" :offset="0" v-for="(item,index) in list" :key="index">
          <el-card shadow="hover" class="relative mb-3" :body-style="{'padding':0}" :class="{'border-blue-500':item.checked}">
            
            <el-image :src="item.url" fit="cover" :lazy="true" class="h-[150px]" style="width: 100%;" :preview-src-list="[item.url]" :initial-index="0"></el-image>
            <div class="img-title">{{ item.name }}</div>
            <div class="flex items-center justify-center p-2">

              <el-checkbox v-model="item.checked" @change="handleChooseChange(item)" v-if="openChoose"/>
              
              <el-button type="primary" size="small" text @click="handleEdit(item)">重命名</el-button>
              <el-popconfirm title="是否要删除图片?" confirm-button-text="确认" cancel-button-text="取消" @confirm="handleDelet(item.id)">
                <template #reference>
                  <el-button type="primary" size="small" text class="!m-0">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-pagination background layout="prev,pager,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"/>
    </div>
  </el-main>

  <el-drawer v-model="drawer" title="上传图片" >
    <UploadFile :data="{image_class_id}" @success="handleUploadSuccess"/>
  </el-drawer>

</template>

<script setup>
import { computed, ref } from "vue"
import { getImageList,updateImage,deleteImage } from "~/api/image.js"
import { showPrompt,toast } from "~/composables/util.js"
import UploadFile from '~/components/UploadFile.vue'

//上传图片
const drawer= ref(false)
const openUploadFile = ()=>drawer.value = true

//分页部分
const currentPage = ref(1)  //当前页   页码
const total = ref(0)        //总条数
const limit = ref(10)       //每页显示数量
const list =ref([])
const loading =ref(false)
const image_class_id = ref(0)

//获取数据
function getData(P =null){
  //console.log(p);
  if(typeof P == "number"){ 
    currentPage.value = P
  }

  loading.value = true
  getImageList(image_class_id.value,currentPage.value)
  .then(res=>{
    //console.log(res);
    total.value = res.totalCount
    list.value = res.list.map(o=>{
      o.checked = false
      return o
    })
    
  }).finally(()=>{
    loading.value=false
  })
}

//根据分类ID重新加载图片列表
const loadDate = (id) =>{
  currentPage.value =1
  image_class_id.value = id
  getData()
}

//图片重命名
const handleEdit = (item)=>{
  showPrompt("重命名",item.name)
  .then(({ value })=>{

    loading.value = true
    updateImage(item.id,value)
    .then(res=>{
      toast("修改成功")
      getData()
    })
    .finally(()=>{
      loading.value = false
    })

  })
}

//删除图片
const handleDelet = (id)=>{
  loading.value = true
  deleteImage([id])
  .then(res=>{
    toast("删除成功")
    getData()
  }).finally(()=>{
    loading.value = false
  })
}

//上传成功
const handleUploadSuccess =()=>getData(1)

const props =defineProps({
  openChoose:{
    type:Boolean,
    default:false
  },
  limit:{
    typeof:Number,
    default:1
  }
})

//选中的图片获取
const emit = defineEmits(["choose"])
const checkedImage = computed (()=>list.value.filter(o=>o.checked))

//复选框判断
const handleChooseChange = (item)=>{
  if(item.checked && checkedImage.value.length > props.limit){
    item.checked = false
    return toast(`最多只能选中${props.limit}张`,'error')
  }
  emit("choose",checkedImage.value)
}

defineExpose({
  loadDate,
  openUploadFile
})


</script>

<style lang='scss'>
.image-main {
  position: relative;
  .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
  }
  .bottom {
    @apply flex items-center justify-center;
    position: absolute;
    height: 50px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.img-title {
  position: absolute;
  top: 122px;
  left: -1px;
  right: -1px;
  @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1;
}

</style>